<template>
  <div>
    <el-row :gutter="6">
      <el-form
        ref="boxForm"
        :model="boxData"
        :rules="rules"
        size="mini"
        label-width="60px"
      >
        <el-card>
          <span class="title-icon">小包标准出库</span>
        </el-card>
        <el-card :span="24" style="margin-top: 5px">
          <el-row style="margin-top: 15px">
            <el-col :span="4">
              <el-form-item label="渠道" prop="channel">
                  <el-select v-model="boxData.channel" v-bind:disabled="disabled" placeholder="请选择渠道" clearable
                    :style="{width: '100%'}">   
                      <el-option v-for="(item, index) in channelOptions" :key="index" :label="item.label"
                      :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="流向" prop="flowDirection">
                <el-select v-model="boxData.flowDirection" v-bind:disabled="disabled" placeholder="请选择流向" clearable
                    :style="{width: '100%'}">   
                      <el-option v-for="(item, index) in flowOptions" :key="index" :label="item.label"
                      :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="袋号" prop="bagNo">
                <el-input
                  v-model="boxData.bagNo"
                  v-bind:disabled="disabled"
                  placeholder="请输入袋号"
                  clearable
                  ref="bagNo"
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" >
              <el-form-item label="追踪号" prop="trackNo" style="margin-left:15px;">
                <el-input
                  v-model="boxData.trackNo"
                  placeholder="请输入追踪号"
                  clearable
                  ref="trackNo"
                  @keyup.enter.native="checkTrackNo"
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button
                type="primary"
                @click="submitForm"
                size="mini"
                style="margin-top: 5px; float: center; margin-left: 72%"
                >打印袋号标签</el-button
              >
            </el-col>
          </el-row>
        </el-card>

        <el-card :span="24" style="margin-top: 5px">
          <el-row style="margin-top: 15px">
            <el-col :span="4">
              <span>实时统计:</span>
            </el-col>
            <el-col :span="4">
              <el-form-item label="袋号:" >
                <span>FFDFEU783840</span>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="总件数:" >
                <span>35</span>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="总重量:" >
                <span style="font-size:17px;">105</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        
        <div id="result_id" style="margin-top: 10px;">
          
          <el-card style="height: 100%">
            <div class="line-card-title" style="height:30px;">
              <el-row >
              <el-col :span="12">
                  <span style="font-size:20;margin-left:70%;font-weight: bold;">本次出库历史（刷新后消失）</span>
              </el-col>
            </el-row>
            </div>
            <el-col :span="24">
              <el-table :data="instockData" style="width: 100%">
                <el-table-column prop="sorted" label="序号">
                </el-table-column>
                <el-table-column prop="customerNmae" label="客户名称" >
                </el-table-column>
                <el-table-column prop="channel"  label="渠道" >
                </el-table-column>
                <el-table-column prop="flowDirection"  label="流向" >
                </el-table-column>
                <el-table-column prop="bagNo"  label="袋号" >
                </el-table-column>
                <el-table-column prop="orderNo"  label="六脉单号" >
                </el-table-column>
                <el-table-column prop="referenceNo"  label="参考号" >
                </el-table-column>
                <el-table-column prop="outStockTime"  label="出库时间" >
                </el-table-column>
                <el-table-column prop="inStockActualWeight"  label="实重" >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope" v-if="scope.row.optResult==='关联成功'">
                    <el-button
                      @click="undoRelevance(scope.row)"
                      type="text"
                      size="small"
                      >撤销</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            
          </el-card>
        </div>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      disabled:true,
      boxData: {
        channel: "",
        flowDirection: "",
        bagNo: "",
        trackNo: ""
      },
      instockData: [
 //       {
 //          sorted: 0,
 //          orderNo: "",
 //          bagNo: "",
 //          optResult: ''
 //        }
      ],
      channelOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      flowOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      
      rules: {
        channel: [
          {
            required: true,
            message: "请选择渠道",
            trigger: "blur",
          },
        ],
        bagNo: [
          {
            required: true,
            message: "请输入袋号",
            trigger: "blur",
          },
        ],
        trackNo: [
          {
            required: true,
            message: "请输入追踪号",
            trigger: "blur",
          },
        ]
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    checkTrackNo(){
          var data = {}
          data["trackingNo"] = this.boxData.trackNo
          ajax("checkTrackNo",data).then(res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            }else{
              this.boxData.orderNo = ""
              this.boxData.bagNo = ""
              this.instockData =[]
              this.$nextTick(_ => {
                  this.$refs.orderNo.$refs.input.focus();
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    //获取焦点
    submitForm(){

    },
    nextInput(ref) {
      this.$refs[ref].focus();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.line-card-title {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: rgba(210, 210, 207, 0.64);
  color: #1e201f96;
}
</style>
